<template>
  <div>
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('listStandardList.wddb')" content="8$t('listStandardList.grw')" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('listStandardList.bzrwpjclsj')" content="32$t('listStandardList.fz')" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('listStandardList.bzwcrws')" content="24$t('listStandardList.g')"/>
        </a-col>
      </a-row>
    </a-card>

    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="$t('listStandardList.bzlb')">

      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">{{ $t('listStandardList.qb') }}</a-radio-button>
          <a-radio-button value="processing">{{ $t('listStandardList.jxz') }}</a-radio-button>
          <a-radio-button value="waiting">{{ $t('listStandardList.ddz') }}</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>

      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="$refs.taskForm.add()">{{ $t('listStandardList.tj') }}</a-button>
      </div>

      <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
            <a slot="title">{{ item.title }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a>{{ $t('listStandardList.bj') }}</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item><a>{{ $t('listStandardList.bj') }}</a></a-menu-item>
                <a-menu-item><a>{{ $t('listStandardList.sc') }}</a></a-menu-item>
              </a-menu>
              <a>{{ $t('listStandardList.gd') }}<a-icon type="down"/></a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>Owner</span>
              <p>{{ item.owner }}</p>
            </div>
            <div class="list-content-item">
              <span>{{ $t('listStandardList.kssj') }}</span>
              <p>{{ item.startAt }}</p>
            </div>
            <div class="list-content-item">
              <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
            </div>
          </div>
        </a-list-item>
      </a-list>

      <task-form ref="taskForm" />
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '@/components/tools/HeadInfo'
import TaskForm from './modules/TaskForm'

const data = []
data.push({
  title: 'Alipay',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  description: '那是一种内在的东西， 他们到达不了，也无法触及的',
  owner: this.$t('listStandardList.fxx'),
  startAt: '2018-07-26 22:44',
  progress: {
    value: 90
  }
})
data.push({
  title: 'Angular',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  description: this.$t('listStandardList.xwsyghdxyxszhdhdxsbhxwd'),
  owner: this.$t('listStandardList.qll'),
  startAt: '2018-07-26 22:44',
  progress: {
    value: 54
  }
})
data.push({
  title: 'Ant Design',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  description: this.$t('listStandardList.smjxyhqkljgwwcryl'),
  owner: this.$t('listStandardList.ldd'),
  startAt: '2018-07-26 22:44',
  progress: {
    value: 66
  }
})
data.push({
  title: 'Ant Design Pro',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
  description: this.$t('listStandardList.czzynmddjgsqppzjlwdjg'),
  owner: this.$t('listStandardList.zxx'),
  startAt: '2018-07-26 22:44',
  progress: {
    value: 30
  }
})
data.push({
  title: 'Bootstrap',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  description: this.$t('listStandardList.nshwzhxzjxysmcbxzjyysm'),
  owner: this.$t('listStandardList.wjh'),
  startAt: '2018-07-26 22:44',
  progress: {
    status: 'exception',
    value: 100
  }
})

export default {
  name: 'StandardList',
  components: {
    HeadInfo,
    TaskForm
  },
  data () {
    return {
      data,
      status: 'all'
    }
  }
}
</script>

<style lang="less" scoped>
    .ant-avatar-lg {
        width: 48px;
        height: 48px;
        line-height: 48px;
    }

    .list-content-item {
        color: rgba(0, 0, 0, .45);
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 40px;
        span {
            line-height: 20px;
        }
        p {
            margin-top: 4px;
            margin-bottom: 0;
            line-height: 22px;
        }
    }
</style>
